{extend name="../index/public/mlay" /}
{block name="title"}我的提现{/block}
{block name="style"}
<style>
	html {
		height: 100%;
	}

	body {
		height: 100%;
	}

	#app {
		height: 100%;
	}

	.take {
		font-size: 0.7rem;
		border-radius: 1rem;
		margin: 0.5rem 0.5rem;
		background: #fff;
	}

	.take p {
		padding: 0.5rem 0rem;
		margin: 0 0.5rem;
		/* background: #fff; */
		border-bottom: 1px solid #e7e7e7;
	}

	.take p input {
		padding-left: 0.5rem;
	}

	.money {
		font-size: 0.7rem;
		/* margin: 0 1rem; */
		padding: 0.5rem 1rem;
	}

	.money_box {
		padding: 0.5rem 0.5rem;
		margin: 0.5rem 0;
		background: #fff;
		align-items: center;
		border-radius: 0.5rem;
		box-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.1);
	}

	.undo {
		background: #ffaa00;
		border-radius: 1.5rem;
		width: 2.5rem;
		height: 1rem;
		text-align: center;
		color: #fff;
	}
	.undo2{
		background: #ccc;
	}

	.submit {
		background: #ffaa00;
		color: #fff;
		margin-top: 0.5rem;
		border-radius: 30px;
		padding: 0.4rem 0.5rem;
		width: 100%;
		text-align: center;
	}
</style>
<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
{/block}
{block name="header"}
{/block}
{block name="container"}
<div id="app">
	<div id="">
		<div style="font-size: 0.7rem;margin: 1rem 1rem 0.5rem 1rem;color: #939393;" class="">
			申请提现
		</div>
		<div class="take">
			<p>开户行<input v-model="bank" type="text" placeholder="开户行" value="" /></p>
			<p>银行卡号<input v-model="card" type="text" placeholder="请输入会员实名下的银行卡号" value="" /></p>
			<p>提现金额<input v-model="money" type="text" placeholder="请输入提现金额" value="" /></p>
			<div style="font-size: 0.7rem;padding-left: 0.5rem;color: #9d9d9d;" class="">
				可提现金额￥{$vip.money_take}
			</div>
			<p>备注<input v-model="remark" type="text" placeholder="备注" value="" /></p>
		</div>
	</div>
	<div style="font-size: 0.7rem;padding: 0 1rem;" class="flex ju_sb">
		<span @click="submit" class="submit">提交申请</span>
		<!-- <span @click="cancel_the_submission" style="background: red;border-radius: 30px;padding: 0.2rem 0.5rem;">撤销申请</span> -->
	</div>
	<div class="money">
		<div style="font-size: 0.7rem;margin-top: 1rem;color: #939393;" class="">
			提现记录
		</div>
		<div class="money_box flex ju_sb" v-for="(item,index) in Data" v-cloak>
			<div class="">
				<div class="">
					<span>{{item.bank}} </span>
					<span>提现￥:{{item.money_take}}</span>
				</div>
				<div class="">
					<span :style="{color:(item.status<1?conFontColor:'#008800')}">{{item.status_txt}}</span>
					<span>{{item.time}}</span>
				</div>
			</div>
			<span v-if="item.status<1" class="undo" @click="undo(item)">撤销</span>
			<span v-else class="undo undo2" @click="undo_two">撤销</span>
		</div>
		<div v-if="this.Data.length==0" class="tc">
			没有提现记录哦
		</div>
	</div>
	<!-- 	<div style="width: 5rem;" v-for="(item,index) in images" @click="click(index,item)" id="">
		<img :src="item">
	</div> -->
</div>
{/block}
{block name="copyright"}{/block}
{block name="script"}
<!-- 引入vue.js文件使用vue开发 -->
<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- vant -->
<script src="__TEM_STATIC__/js/public/vant-2.12.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	Vue.use(vant.ImagePreview);
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				conFontColor:'#ffaa00',
				show: false,
				bank: "{$vip.bank}",
				card: "{$vip.card}",
				money: '',
				remark: '',
				index: '',
				Data: [],
				images: [
					'https://img01.yzcdn.cn/vant/apple-1.jpg',
					'https://img01.yzcdn.cn/vant/apple-2.jpg',
				],
				vip_money: {$vip.money_take},

			}
		},
		//计算属性	
		computed: {},
		//监听属性
		watch: {},
		//钩子函数	
		created() {
			this.shuju();
		},
		mounted() {

		},
		methods: {
			submit() {
				let that = this
				if (that.bank == ''){
					weui.topTips('开户行不能为空');
					return false;
				}
				if (that.card == ''){
					weui.topTips('银行卡号不能为空');
					return false;
				}
				if (that.money == ''){
					weui.topTips('请输入提现金额');
					return false;
				}
				if (that.money > that.vip_money){
					weui.topTips('提现金额不能超过可提现金额');
					return false;
				}
				if (that.money < 100){
					weui.topTips('提现金额不能低于100元');
					return false;
				}
				$.post("", {
					bank: that.bank,
					card: that.card,
					money: that.money,
					remark: that.remark,
					apply: 'add',
				}, function(res) {
					if (res.code == 1) {
						vant.Toast.success(res.msg);
						that.shuju()
					} else {
						weui.topTips(res.msg);
					}
				});
			},
			shuju() {
				$.post("", {

				}, function(res) {
					console.log(res);
					vm.Data = res.data.items
				});
			},
			undo(e) {
				console.log(e);
				let that = this
				vant.Dialog.confirm({
				  title: '温馨提示',
				  message: '确定要撤销吗?',
				})
				  .then(() => {
				    // on confirm
					$.post("", {
						apply: 'cancel',
						id: e.id
					}, function(res) {
						console.log(res);
						if(res.code==1) {
							vant.Toast.success(res.msg);
							that.shuju()
						} else {
							vant.Toast.fail(res.msg);
						}
					});
				  })
				  .catch(() => {
				    // on cancel
				  });		
			},
			undo_two() {
				vant.Toast.fail('无法撤销');
			},
			cancel_the_submission() {
				console.log('撤销');
			},
			click(index, item) {
				vant.ImagePreview({
					images: this.images,
					showIndex: true,
					loop: true, //是否循环播放
					startPosition: index
				})
			},
			onChange(index) {
				this.index = index;
				console.log('000', index);
			},
		}
	})
</script>
{/block}
